<template>
    <div id="player">

    </div>
</template>
<script>


export default {
    name: 'rtvs_back',
    props: {
        clientId: {
            type: String,
            default: ''
        },
        time: {
            type: Array,
            default: []
        }
    },
    data: function () {
        return {
            complete: false,
           // stop:false
        }
    },
    methods: {
        //初始化rtvs
        init() {
            CvNetVideo.Init(document.querySelector("#player"), 4,
                {
                    //cssUrl: "rtvs.css",
                    events: {
                        //截图事件
                        onCapture: this.onCapture,
                        //超时前警告通知
                        timeoutWarning: this.timeoutWarning,
                        //超时警告取消
                        timeoutCanceled: this.timeoutCanceled,
                        //超时通知
                        timeoutClose: this.timeoutClose,
                        //停止播放通知
                        onStop: this.onVideoStop,
                        //服务端通知
                        onServerNotice: this.onServerNotice,
                        //被服务端结束播放通知
                        onEndByServer: this.onEndByServer,
                        //HLS模式播放前通知 可获取RTMP HLS 等URL
                        onHlsPlay: this.onHlsPlay,
                        //当前模式不支持265通知
                        onChangeH265Player: this.onChangeH265Player
                    },
                    seekMode: 0,
                    //初始化完成通知
                    callback: this.onComplete,
                    //启用双击放大单窗口
                    enableDbcZoom: true,


                });

        },

        //         Sim:sim卡号
        // Channel:通道号
        // MediaType:
        // StreamType:码流
        // StorageType:存储
        // PlaybackMode:回放模式
        // Multiple:倍速
        // StartTime:开始时间
        // EndTime:结束时间
        // videoId:窗口ID 0表示当前选中窗口 其他按顺序选择
        // config:配置项 与Init一致
        // Callback:回调，暂未使用
        // playermode:播放模式
        // DataSource:0自动 1设备 2服务端缓存       
        getbackPlay() {
            console.log("开始播放")
            for (var i = 1; i < 5; i++) {
                this.SetOsdText(i)
                CvNetVideo.PlaybackVideo(
                    0 + this.clientId,
                    i, 0,
                    this.streamType == "" ? 0 : 1,
                    0, 0, 0, this.time[0], this.time[1],
                    i,
                    { //服务器地址(集群版本之后不需设置，会自动从集群管理获取)
                        clusterHost: "193.112.153.69",
                        //服务器Ws端口 默认18002(集群版本之后不需设置，会自动从集群管理获取)
                        clusterPort: 17000,
                    }, null, 0, 0);

            }

        },
        //         PlaybackControl:回放控制（0：开始回放，1：音暂停回放，2：结束回放，3：快进回放，4：关键帧快退回放，5：拖动回话，6：关键帧播放）
        // Multiple:快进或快退倍数（0：无效，1：1倍，2：2倍，3：4倍，4：8倍，5：16倍；回放控制为3和4时，此字段内容有效，否则置0）
        // DragPlaybackPosition:拖动回放位置（YY-MM-DD-HH-MM-SS，回放控制为5时，此字段有效）
        stopbackPlay() {
            for (var i = 1; i < 5; i++) {
                CvNetVideo.PlaybackVideoControl("0" + this.clientId, i, 2, 0, 0, i,
                    {
                        //服务器地址(集群版本之后不需设置，会自动从集群管理获取)
                        clusterHost: "193.112.153.69",
                        //服务器Ws端口 默认18002(集群版本之后不需设置，会自动从集群管理获取)
                        clusterPort: 17000,
                    }
                );
            }
            console.log("结束回放")
        },


        //一些rtvs事件
        SetOsdText(id) {
            CvNetVideo.SetOsdVisible(true, id);
            CvNetVideo.SetOsdColor("#00ff00", id);
            CvNetVideo.SetOsdText(id, "通道" + id);
        },
        onComplete() {
            this.complete = true;
        },
        onCapture(base64png, id, ucVideo) {
            console.log(id + "分屏截图 sim:" + ucVideo.Sim + " Channel:" + ucVideo.Channel);
            //console.log(base64png);
        },
        timeoutWarning(leftMsec, time) {
            //leftMsec 剩余关闭毫秒
            //time     上次有动作时间
            document.title = leftMsec / 1000 + '秒后将自动关闭';
        },
        timeoutCanceled() {
            document.title = oldTitle;
        },
        timeoutClose(time) {
            //CvNetVideo.Close(-1);
            alert('长时间无操作，已自动关闭！');
            document.title = oldTitle;
        },
        onVideoStop(id, ucVideo) {
           // this.stop=true;
            console.log("id:" + id + " ucVideo" + ucVideo);
        },
        onServerNotice(type, id, ucVideo) {
            //console.log("事件类型:" + type + " videoid:" + id);
        },
        onEndByServer(msg, id, ucVideo) {
            //alert(id + "分屏播放结束，原因：" + msg);
        },
        onHlsPlay(id, ucVideo, hlshttp, hlshttps, rtmpurl, cid, flvhttp, flvhttps) {
            console.log(id, hlshttp, hlshttps, rtmpurl, cid, flvhttp, flvhttps);
        },
        onChangeH265Player(playermode) {
            console.log("当前模式" + playermode + "不支持H265，自动切换软解模式");
        },
        backplaylist(val) {
            console.log(val)
        }
    },
    mounted() {
        this.init();
    },
    beforeUnmount() {
        console.log("销毁")
        this.stopbackPlay();
    },
    watch: {
        time() {
                this.stopbackPlay();
                this.getbackPlay();
        },
        complete() {
           this.getbackPlay();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#player {
    height: 64vh;
    width: 98%;
}

:deep(.video-osd-text) {
    width: auto;
}

:deep(.video-select) {
    border: 2px solid #080808 !important;
}

:deep(.video-body) {
    background: #080808;
}

#canvasWebCodec-0 {
    background: #080808;
}
</style>
